<template>
  <div>
    <ul style="margin-left:15px">
      <li v-for="(item,index) in data" :key="item.id" style="line-height:2">
        <input type="checkbox" :value="item.hash.funcid" :id="index" v-model="checkedlist">
        <label :for="index">{{item.hash.funcname}}</label>
        <tree :psupid="item.hash.funcid" :retVal="ret" ref="child" style="margin-left:20px" :rid="rid"></tree>
      </li>
    </ul>
  </div>
</template>

<script>
import tree from '~/components/common/tree/tree.vue';

export default {

  data() {
    return {
      data: [],
      ts: this.newStore(),
      supid: '',
      showTree: false,
      checkedlist: [],
      ret: [],
    };
  },
  components: {
    tree,
  },
  name: 'tree',
  props: {
    psupid: '',
    rid: '',
    retVal: {
      type: Array,
    },
  },
  created() {
    this.getTree(this.psupid, this.rid);
    this.ret = this.retVal;
    // this.psupid.i+=1;
  },
  watch: {
    checkedlist(newValue, oldValue) {
      for (const i of oldValue) {
        this.retVal.splice(this.retVal.indexOf(i), 1);
      }

      for (const i of newValue) {
        this.retVal.push(i);
      }
    },
  },

  methods: {

    getTree(pid, rid) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B639EC0CBABE57827',
        token: localStorage.getItem('token'),
        supid: pid,
        rid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.funcid) {
          this.data = ts.d.data.operation1;
          for (const i of this.data) {
            if (i.hash.rid.length > 0) {
              this.checkedlist.push(i.hash.funcid);
            }
          }
        } else {
          this.data = [];
        }
      });
    },

  },
};
</script>

<style>
</style>
